<template>
	<view class="content">
		<view class="pop_bg" v-show='head' @tap="closeNavSwitch" @touchmove.stop.prevent='moveHandle'>
			<view class="pop_bg_item1 pop_bg_item_left">
				<view class="left_item" v-for="(item, index) in titledata" :key="index" @tap.stop="gotocreate(index)">
					<i :class="item.pic"></i>{{item.title}}
				</view>
			</view>
		</view>
		<view class="bg" v-if="datas == null">
			<image src="/static/image/child-bg.png" mode=""></image>
			<view class="top joinTop">
				<view>您还未添加孩子</view>
				<navigator hover-class="false" class="addchild" url="child-add">添加孩子<i class="iconfont iconjiantou joinIcon"></i></navigator>
			</view>
		</view>
		<view class="bg" v-else>
			<image src="/static/image/child-bg.png" mode=""></image>
			<view class="top">
				<view class="topImg">
					<headimg :realSrc="datas.avatar"></headimg>
				</view>
				<view class="clild-cont">
					<view class="child-name">{{datas.nicheng}}
						<view class="clild_button" @tap="switchChild">切换孩子</view>
					</view>
					<view class="clild-info">学校：{{datas.school_name}}</view>
					<view class="clild-info">年级：{{datas.gradeName}}</view>
				</view>
			</view>
		</view>
		<view class="navList">
			<view class="navItem" :class="navIndex == index ? 'navActive':''" v-for="(item,index) in navLiat" :key="index" @tap="navClick(index)">{{item}}</view>
		</view>
		<uni-condition v-if="navIndex == 0"></uni-condition>
		<view class="tips" v-if="navIndex == index+1" v-for="(item,index) in tips" :key="index">
			<view class="tipItem" :class="tipIndex == item1.tipstype ? 'tipActive':''" v-for="(item1,index1) in tips[index]"
			 :key="index1" @tap="tipClick(item1.tipstype)">{{item1.name}}</view>
		</view>
		<list v-if="navIndex != 0" :list='list' :status="status" :contentText="contentText" stateType="1" addType="3"></list>
		<view v-if="isShow" class="bottom">
			<view @tap="addArticle">添加</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	import util from '@/common/util.js';
	import list from '@/components/artlist/artlist.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniCondition from '@/components/condition.vue';
	export default {
		components: {
			list,
			uniLoadMore,
			uniCondition,
			headimg
		},
		data() {
			return {
				titledata: [{
						pic: 'iconfont icontianjiahaizi moreI',
						title: '添加孩子'
					},
					{
						pic: 'iconfont iconjiechubangding moreI',
						title: "解除绑定"
					},
				],
				head: false,
				datas: {},
				index: 0,
				navLiat: ['学情', '目标', '成长', '才艺'],
				navIndex: 0,
				list: [], //新闻列表
				reload: true,
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				tips: [
					[{
						name: '全部',
						tipstype: 0
					}, {
						name: '理想',
						tipstype: 1
					}, {
						name: '学业规划',
						tipstype: 2
					}, {
						name: '职业规划',
						tipstype: 3
					}],
					[{
						name: '全部',
						tipstype: 0
					}, {
						name: '成绩',
						tipstype: 4
					}, {
						name: '评语',
						tipstype: 5
					}, {
						name: '获奖',
						tipstype: 6
					}],
					[{
						name: '全部',
						tipstype: 0
					}, {
						name: '兴趣',
						tipstype: 7
					}, {
						name: '特长',
						tipstype: 8
					}]
				],
				tipIndex: 0,
				isShow: false,
			}
		},
		onPullDownRefresh() {
			this.getChildren();
			if (this.navIndex != 0) {
				this.reload = true;
				this.page = 1;
				this.getList();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.navIndex != 0) {
				this.status = 'loading';
				this.page = this.page + 1;
				var _this = this;
				setTimeout(function() {
					_this.getList();
				}, 500);
			}
		},
		// 右上角
		onNavigationBarButtonTap() {
			this.head = !this.head
			this.$forceUpdate();
		},
		onShow() {
			this.getChildren();
			if (this.navIndex != 0) {
				this.reload = true;
				this.page = 1;
				this.getList();
			}
		},
		onUnload() {
			this.$off('select_chidren');
		},
		onLoad(e) {
			if (e.index != null) {
				this.index = e.index;
			}
			this.$on('select_chidren', (data) => {
				this.getChildren();
			});
		},

		methods: {
			/* navItem切换 */
			navClick(index) {
				var _this = this;
				_this.navIndex = index;
				_this.tipIndex = 0;
				_this.reload = true;
				_this.page = 1;
				_this.getList();
				if (_this.navIndex != 0) {
					_this.isShow = true;
				} else {
					_this.isShow = false;
				}
			},
			/* tips切换 */
			tipClick(type) {
				this.tipIndex = type;
				this.reload = true;
				this.page = 1;
				this.getList();
			},
			/* 获取文章列表 */
			getList() {
				var data = {
					page: this.page,
					pagesize: 7,
					article_type: this.navIndex,
					article_label_type: this.tipIndex,
					child_user_id: uni.getStorageSync('currentChild').student_id
				}
				this.$zapi.apiPost('user/newarticle.Lists/articleList', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].creat_time);
							list[i].typeName = util.getArtType(list[i].article_label_type)
						}
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.list = [];
						} else {
							this.status = 'noMore';
						}
					}
				})

			},
			closeNavSwitch() {
				this.head = false
			},
			/* 获取孩子列表 */
			getChildren() {
				this.$zapi.apiPost('user/currency.Parents/childlist').then(res => {
					if (res.data.code == 200) {
						var list = res.data.data; //我加入群列表的信息
						list.forEach((item, key) => {
							item.nicheng = item.nicheng ? item.nicheng : '未设置昵称';
							item.gradeName = item.grade ? util.getgradeName(item.grade) : '未知年级';
							if (item.school_info && item.school_info.length > 0 && item.school_info[0].schoolid > 0) {
								let school = item.school_info[0]
								item.school_name = school.school_name ? school.school_name : '未知学校';
							} else {
								item.school_name = '未绑定学校';
							}
						})

						let currentChild = uni.getStorageSync('currentChild');
						if (!currentChild) {
							this.datas = list[0];
							uni.setStorageSync('index', 0);
							uni.setStorageSync('currentChild', this.currentChild);
						} else {
							list.forEach((item, key) => {
								if (item.student_id == currentChild.student_id) {
									this.index = key;
								}
							})
							this.datas = currentChild;
						}
					} else {
						this.datas = null
					}
					uni.setStorage({
						key: "currentChild",
						data: this.datas
					})
				})
				this.$off('select_chidren');
			},
			/* 切换孩子 */
			switchChild() {
				uni.navigateTo({
					url: 'my-children'
				})
			},
			/* 导航栏右侧按钮点击事件 */
			gotocreate: function(index) {
				this.head = !this.head;
				if (index == 0) {
					uni.navigateTo({
						url: 'child-add'
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: 'child-unbound'
					})
				}
			},
			/* 暂未开通 */
			no() {
				uni.showToast({
					title: '该功能暂未开通',
					icon: 'none'
				})
			},
			/* 添加文章 */
			addArticle() {
				uni.navigateTo({
					url: '../article/article-release?article_type=' + this.navIndex + '&article_label_type=' + this.tipIndex,
					url: '/pages/articleModule/article-release?stateType=1&addType=3&article_type=' + this.navIndex +
						'&article_label_type=' + this.tipIndex
				})
			}
		}
	}
</script>

<style>
	view {
		line-height: 1.2;
	}

	.pop_bg {
		position: fixed;
		z-index: 600;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}

	.pop_bg_item1 {
		position: absolute;
		right: 20upx;
		margin-top: 20upx;
		width: 30%;
		background-color: #ffffff;
		border-radius: 5upx;
	}

	.pop_bg_item1:before {
		content: "";
		position: absolute;
		display: inline-block;
		border-width: 18upx;
		border-style: solid;
		border-color: white transparent transparent transparent;
		transform: rotate(180deg);
		top: -30upx;
	}

	.pop_bg_item_left:before {
		right: 5%;
	}

	.left_item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 32upx;
		padding: 15upx 0;
		color: #333333;
	}

	.moreI {
		font-size: 40upx !important;
		margin: 0 10upx 0 0 !important;
		-webkit-text-fill-color: #333333 !important;
	}

	.uni-page-head-btn {
		margin-right: 16upx !important;
	}

	.bg {
		height: 322upx;
		width: 750upx;
	}

	.bg image {
		height: 322upx;
		width: 750upx;
		position: absolute;
	}

	.top {
		position: relative;
		display: flex;
	}

	.topImg {
		width: 100upx;
		height: 100upx;
		margin-top: 42upx;
		margin-left: 38upx;
		border-radius: 50%;
	}

	.topImg image {
		max-height: 100upx;
		max-width: 100upx;
		border-radius: 50%;
	}

	.joinTop {
		margin: 0;
		text-align: center;
		color: #FFFFFF;
		display: block;
	}

	.joinTop view {
		font-size: 36upx;
		padding-top: 60upx;
		line-height: 1;
	}

	.addchild {
		display: inline-flex;
		align-items: center;
		padding-top: 30upx !important;
		font-size: 36upx;
	}

	.joinIcon {
		background: #FFFFFF;
		font-size: 50upx !important;
		margin: 0 !important;
		padding: 0 !important;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.clild-cont {
		margin-left: 20upx;
		padding-top: 72upx;
		line-height: 1;
	}

	.child-name {
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		font-size: 36upx;
		font-weight: bold;
		margin-bottom: 20upx;
	}

	.clild-info {
		color: #FFFFFF;
		font-size: 28upx;
		margin-bottom: 10upx;
	}

	.clild_button {
		font-weight: Regular;
		font-size: 28upx;
		padding: 14upx 18upx;
		background: #FFFFFF;
		color: #FF9900;
		margin-top: -12upx;
		position: absolute;
		right: 32upx;
	}

	.people {
		font-size: 28upx;
		font-weight: Regular;
		color: white;
		margin-top: 34upx;
	}

	.navList {
		height: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 20upx solid #FAFAFA;
	}

	.navItem {
		color: #666666;
		font-size: 34upx;
		display: flex;
		justify-content: center;
		line-height: 94upx;
		flex-direction: column;
		align-items: center;
	}

	.navActive {
		color: #FF9900;
	}

	.navActive:after {
		content: '';
		width: 28upx;
		height: 4upx;
		background: #FF9900;
		font-weight: bold;
	}

	/* 文章 */
	.tips {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: 10upx solid #FAFAFA;
		border-bottom: 30upx solid #FAFAFA;
		background: #FAFAFA;
	}

	.tipItem {
		color: #999999;
		font-size: 30upx;
		padding: 8upx 22upx;
		border: 2upx solid #CCCCCC;
		line-height: 1;
		text-align: center;
		border-radius: 26upx;
		margin-left: 30upx;
		margin-right: 10upx;
	}

	.tipActive {
		color: #FFFFFF;
		background: #FF9900;
		border: 2upx solid #FF9900;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
		background: #FFFFFF;
	}

	.bottom view {
		background: #FF9900;
		text-align: center;
		color: #FFFFFF;
		font-size: 34upx;
		margin: 20upx 30upx 0;
		width: 690upx;
		height: 80upx;
		line-height: 80upx;
	}
</style>
